<template>
  <a-row>
    <a-col :span="24">
      <a-card>
        <a-space>
          <a-button type="primary" @click="addData">
            <component is="icon-plus"/>
            添加单页
          </a-button>
        </a-space>
        <div style="margin-top: 20px">
          <a-table :data="tableData" :pagination="{pageSize:15}">
            <template #columns>
              <a-table-column v-for="(item,i) of columns" :title="item.title" :data-index="item.dataIndex" :key="i++">
                <template v-if="item.title==='更新时间'" #cell="{ record }">
                  {{ moment(record["UpdateTime"]).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
              </a-table-column>
              <a-table-column title="操作">
                <template #cell="{ record }">
                  <a-space>
                    <a @click="editData(record)">编辑</a>
                    <!--                    <a-popconfirm :content="`确诊删除 ${record['PageName']} ?`" @ok="DelData(record)" okText="删除" cancelText="取消">
                                          <a>删除</a>
                                        </a-popconfirm>-->
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </div>
      </a-card>
    </a-col>
  </a-row>
  <a-modal :width="1000" :title="boolData.isAdd?'添加分类':'编辑分类'" v-model:visible="boolData.isShow" :footer="null" @cancel="boolData.isShow===false">
    <a-form :model="addValue">
      <a-form-item label="名称">
        <a-input v-model="addValue.PageName" placeholder="名称"/>
      </a-form-item>
      <a-form-item label="名称">
        <editor :value="addValue.PageInfo" ref="editor"></editor>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="SaveData">提交</a-button>
          <a-button @click="boolData.isShow=false">取消</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import moment from "moment";
import Editor from "../../components/editor.vue";
import { useInfoStore } from "@/stores/user";

export default {
  components: { Editor },
  data() {
    return {
      moment,
      columns: [
        {
          title: "ID",
          key: "PageId",
          dataIndex: "PageId",
        },
        {
          title: "名称",
          dataIndex: "PageName",
        },
        {
          title: "更新时间",
          dataIndex: "UpdateTime",
          slotName: "UpdateTime",
        },
      ],
      addValue: {
        Id: 0,
        PageName: "",
        PageInfo: "",
      },
      boolData: {
        isShow: false,
        isAdd: false,
      },
      tableData: [],
      userData: useInfoStore(),
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await this.$Http.page();
      if(res["Data"]) {
        this.tableData = res["Data"];
      }
    },
    addData() {
      this.$router.push("/member/pageDetail");
    },
    editData(data) {
      this.$router.push(`/member/pageDetail?pageId=${data.PageId}`);
    },
    async delData(data) {
      await this.$Http.pageDel({ PageId: data["PageId"] });
      this.$message.success("删除成功!");
      await this.getData();
      this.boolData.isShow = false;
    },
  },
};
</script>

<style scoped>

</style>
